<!-- 修改票据 -->
<template>
    <div>
        <DialogContent ref="editBillCheck" title="票据审核" @close="closeEditDialog">
            <div class="rem-dialog-con bill-form-box">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-row>
                        <el-col :span="24" class="form-title">
                            <div class="form-title-con">
                                票据图片
                            </div>
                        </el-col>
                        <el-col :span="24" class="bill_img_box">
                            <div>
                                <div class="bill_detail_img">
                                    <img width="240" height="148" @click="openPreview(form.bill_front_photo_path)" :src="this.form.bill_front_photo_path" v-if="form.bill_front_photo_path != '' && form.bill_front_photo_path != undefined && form.bill_front_photo_path != null"/>
                                </div>
                                <div class="bill_check_btn_bianji_box">票据正面<el-button type="primary" size="small" class="bill_check_btn_bianji" @click="bianji(form.bill_front_photo_path)" v-if="form.bill_front_photo_id != '' && form.bill_front_photo_id != null && form.bill_style_id != 305">编辑</el-button></div>
                            </div>
                            <div>
                                <div class="bill_detail_img">
                                    <img width='240' height='148' @click="openPreview(form.bill_back_photo_path1)" :src="this.form.bill_back_photo_path1" v-if="form.bill_back_photo_path1 != '' && form.bill_back_photo_path1 != undefined && form.bill_back_photo_path1 != null"/>
                                </div>
                                <div class="bill_check_btn_bianji_box">票据背书面1<el-button type="primary" size="small" class="bill_check_btn_bianji" @click="bianji(form.bill_back_photo_path1)" v-if="form.bill_back_photo_path1 != '' && form.bill_back_photo_path1 != undefined && form.bill_back_photo_path1 != null && form.bill_style_id != 305">编辑</el-button></div>
                            </div>
                            <div>
                                <div class="bill_detail_img">
                                    <img width='240' height='148' @click="openPreview(form.bill_back_photo_path2)" :src="this.form.bill_back_photo_path2" v-if="form.bill_back_photo_path2 != '' && form.bill_back_photo_path2 != undefined && form.bill_back_photo_path2 != null"/>
                                </div>
                                <div class="bill_check_btn_bianji_box">票据背书面2<el-button type="primary" size="small" class="bill_check_btn_bianji" @click="bianji(form.bill_back_photo_path2)" v-if="form.bill_back_photo_path2 != '' && form.bill_back_photo_path2 != undefined && form.bill_back_photo_path2 != null && form.bill_style_id != 305">编辑</el-button></div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="bill_img_box" v-if="form.bill_style_id != 305">
                            <div>
                                <div class="bill_detail_img">
                                    <img width='240' height='148' @click="openPreview(bill_front_photo_path)" :src="bill_front_photo_path" v-if="form.bill_front_photo_path != '' && form.bill_front_photo_path != undefined && form.bill_front_photo_path != null"/>
                                </div>
                                <div>票据正面涂抹后</div>
                            </div>
                            <div>
                                <div class="bill_detail_img">
                                    <img width='240' height='148' @click="openPreview(bill_back_photo_path1)" :src="bill_back_photo_path1" v-if="form.bill_back_photo_path1 != '' && form.bill_back_photo_path1 != undefined && form.bill_back_photo_path1 != null"/>
                                </div>
                                <div>票据背书面1涂抹后</div>
                            </div>
                            <div>
                                <div class="bill_detail_img">
                                    <img width='240' height='148' @click="openPreview(bill_back_photo_path2)" :src="bill_back_photo_path2" v-if="form.bill_back_photo_path2 != '' && form.bill_back_photo_path2 != undefined && form.bill_back_photo_path2 != null"/>
                                </div>
                                <div>票据背书面2涂抹后</div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="form-title">
                            <div class="form-title-con">
                                票面信息
                            </div>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="票据号：">
                                <el-input class="bill_int" v-model="form.bill_number" placeholder="请输入票据号" maxlength="30"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="票面金额：" class="admin_bill_price">
                                <el-input class="bill_int" v-model="form.bill_sum_price" placeholder="请输入金额" suffix-icon="iconfont icon-yuan"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="承兑行行号：">
                                <el-input class="bill_int" v-model="form.acceptor_cnaps" placeholder="请输入承兑行行号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="承兑人：">
                                <el-input class="bill_int" v-model="form.acceptor_name" placeholder="请输入承兑人"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="汇票到期日：">
                                <el-date-picker
                                        v-model="form.bill_deadline_time"
                                        type="date"
                                        placeholder="选择日期"
                                        class="bill_int">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left" v-if="form.bill_style_id != 305">
                            <el-form-item label="背书次数：" class="flaw-num">
                                <el-input-number class="post-int-mun" v-model="form.endorsement_number" controls-position="right"></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left" v-if="form.bill_style_id != 305">
                            <el-form-item label="电票所在户：">
                                <span>{{this.form.eleBillAccount}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="bill-flaw text_left" v-if="form.bill_style_id != 305">
                            <el-form-item label="瑕疵情况：">
                                <el-checkbox-group v-model="form.bill_flaw_ids" size="medium" @change="changeCheckFlaw(form.bill_flaw_ids)">
                                    <el-checkbox-button :label="1500" class="none-flaw">无瑕疵</el-checkbox-button>
                                    <el-checkbox-button :label="1501" class="turn-flaw">回头<el-input controls-position="right" v-model="form.flaw_append"></el-input></el-checkbox-button>
                                    <el-checkbox-button :label="1506">重复</el-checkbox-button>
                                    <el-checkbox-button :label="1507">质押</el-checkbox-button>
                                    <el-checkbox-button :label="1512">保证</el-checkbox-button>
                                    <el-checkbox-button :label="1513">保理</el-checkbox-button>
                                    <el-checkbox-button :label="1514">上下不一致</el-checkbox-button>
                                    <el-checkbox-button :label="2202">其他</el-checkbox-button>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left">
                            <el-form-item label="承兑机构：">
                                <el-radio-group v-model="form.acceptor_type_id" size="medium" @change="changeCheckbox(form.acceptor_type_id)">
                                    <el-radio-button :label="401">国股</el-radio-button>
                                    <el-radio-button :label="402">城商</el-radio-button>
                                    <el-radio-button :label="404">三农</el-radio-button>
                                    <el-radio-button :label="405">村镇</el-radio-button>
                                    <el-radio-button :label="406">外资</el-radio-button>
                                    <el-radio-button :label="407">财务公司</el-radio-button>
                                    <el-radio-button :label="408">商票</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <div v-if="form.bill_product_id != null && form.bill_product_id != '' && form.bill_style_id != 305">
                            <el-col :span="24" class="form-title">
                                <div class="form-title-con">
                                    询价信息
                                </div>
                            </el-col>
                            <el-col :span="12" class="posted-int-width text_left">
                                <el-form-item label="竞价方式：" prop="bidding_mode">
                                    <el-radio-group v-model="form.bidding_mode" size="small">
                                        <el-radio-button label="3212">自由竞价</el-radio-button>
                                        <el-radio-button label="3210">一口价</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="发布期限：" prop="trade_appoint_day" class="flaw-num text_left">
                                    <el-radio-group v-model="form.trade_appoint_day" size="small">
                                        <el-radio-button :label="0">T + 0</el-radio-button>
                                        <el-radio-button :label="1">T + 1</el-radio-button>
                                        <el-radio-button :label="2">T + N</el-radio-button>
                                    </el-radio-group>
                                    <el-input-number :min="2" :max="10" v-model="form.trade_appoint_day" v-if="form.trade_appoint_day > 1" controls-position="right"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="posted-int-width text_left">
                                <el-form-item label="期望贴息：">
                                    <el-input class="bill_int" v-model="form.hope_discount_interest" :disabled="isDisable" placeholder="请输入利率" suffix-icon="iconfont icon-yuan"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="posted-int-width text_left">
                                <el-form-item label="每十万扣：">
                                    <el-input class="bill_int" v-model="form.every_plus_interest" :disabled="isDisable" placeholder="请输入每十万加" suffix-icon="iconfont icon-yuan"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="posted-int-width text_left">
                                <el-form-item label="期望贴现额：">
                                    <el-input class="bill_int" v-model="form.hope_deal_price" :disabled="isDisable" placeholder="请输入期望贴现额" suffix-icon="iconfont icon-yuan"></el-input>
                                </el-form-item>
                            </el-col>
                        </div>
                        <el-col :span="24" class="form-title">
                            <div class="form-title-con">
                                发布企业信息
                            </div>
                        </el-col>
                        <el-col :span="8" class="text_left">
                            <el-form-item label="企业名称：">
                                <span>{{this.form.drawer_name}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" class="text_left">
                            <el-form-item label="联系人：">
                                <span>{{this.form.contact_name}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" class="text_left">
                            <el-form-item label="手机号：">
                                <span>{{this.form.contact_phone}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="form-title">
                            <div class="form-title-con">
                                备注信息
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="审核备注：">
                                <el-input
                                        type="textarea"
                                        :rows="3"
                                        placeholder="请输入内容"
                                        v-model="form.check_description">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button type="info" size="small" @click="closeDialog()">取消</el-button>
                <el-button type="danger" size="small" @click="confirmCheck(0,'不通过')" v-if="isCheckSave == 'billCheck' || isCheckSave == 'anewBillCheck'">不通过</el-button>
                <el-button type="primary" size="small" @click="confirmCheck(1,'通过')" v-if="isCheckSave == 'billCheck' || isCheckSave == 'anewBillCheck'">通过</el-button>
                <el-button type="primary" size="small" @click="confirmCheck(1,'通过')" v-if="isCheckSave == 'editBillBtn'">保存</el-button>
            </span>
        </DialogContent>
        <DialogContent ref="imagePaintDialog" title="票据涂抹">
            <ImagePaint 
            ref="imagePaint"
            :image="this.paintImage" 
            @uploadToOSS="uploadToOSS" 
            :width='962'
            :height='673'></ImagePaint>
        </DialogContent>
        <ImagePreview ref="imagePreview" :image="this.previewImage"></ImagePreview>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import UploaderImages from '@/component/common/UploaderImages.vue';
    import ImageZoom from '@/component/common/ImageZoom.vue'
    import ImagePaint from '@component/common/ImagePaint.vue';
    import DialogContent from '@component/common/DialogContent.vue';
    import ImagePreview from '@component/common/imagePreview.vue';
    import { getEndorsementFileName, getEndorsementFileName1 } from '@/util/format'
    @Component({
        components: {
            UploaderImages,
            ImageZoom,
            ImagePaint,
            DialogContent,
            ImagePreview
        },
        methods: {
            ...mapActions([
                "getPolicy"
            ])
        },
        computed: {
            ...mapState([
                'policy'
            ])
        }
    })
    export default class EditBill extends Vue {
        @Prop() form: any;
        @Prop() isCheckSave: string;
        // eleBillAccount: any = {}
        updateBillImg1d = Date.now();
        paintImage: string = '';
        previewImage: string = '';
        isDisable: boolean = true;
        get imageUrls() {
            return {
                bill_front_photo_path: this.form.bill_front_photo_path,
                bill_back_photo_path1: this.form.bill_back_photo_path1,
                bill_back_photo_path2: this.form.bill_back_photo_path2,
            }
        }
        // 涂抹的时间戳
        timestamps = {
            bill_front_photo_path: Date.now(),
            bill_back_photo_path1: Date.now(),
            bill_back_photo_path2: Date.now(),
        }

        get bill_front_photo_path () {
            if (!this.form.bill_front_photo_path) {
                return ''
            }
            return getEndorsementFileName1(this.form.bill_front_photo_path) + (/\?/.test(this.form.bill_front_photo_path) ? `&${this.timestamps.bill_front_photo_path}` : `?${this.timestamps.bill_front_photo_path}`);
        }

        get bill_back_photo_path1 () {
            if (!this.form.bill_back_photo_path1) {
                return ''
            }
            return getEndorsementFileName1(this.form.bill_back_photo_path1) + (/\?/.test(this.form.bill_back_photo_path1) ? `&${this.timestamps.bill_back_photo_path1}` : `?${this.timestamps.bill_back_photo_path1}`);
        }

        get bill_back_photo_path2 () {
            if (!this.form.bill_back_photo_path2) {
                return ''
            }
            return getEndorsementFileName1(this.form.bill_back_photo_path2) + (/\?/.test(this.form.bill_back_photo_path2) ? `&${this.timestamps.bill_back_photo_path2}` : `?${this.timestamps.bill_back_photo_path2}`);
        }

        uploadToOSS(imageInfo) {
            let { blob, imageUrl } = imageInfo;
            var formData = new FormData();
            formData.append("OSSAccessKeyId", this.policy.OSSAccessKeyId)
            formData.append("host", this.policy.host)
            formData.append("policy", this.policy.policy)
            formData.append("signature", this.policy.signature)
            formData.append("key", getEndorsementFileName(this.paintImage))
            formData.append("callback", window.btoa(JSON.stringify({
                callbackUrl: 'https://1894469675823662.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/hpxfileoss/callback/',
                callbackBody: '{"object":${object}}',
                callbackBodyType: 'application/json'
            })))
            formData.append("file", blob, getEndorsementFileName(this.paintImage));
            this.$http.post(this.policy.host, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                let ossImg = {
                    file_name: getEndorsementFileName(this.paintImage),
                    file_path: res.data.path
                }
                this.$http.post('file/saveFilePath',ossImg)
                    .then((response) => {
                        let imgData = {
                            name: getEndorsementFileName(this.paintImage),
                            path: res.data.path,
                            id: response.data
                        }
                        let self = this;
                        for (const key in self.imageUrls) {
                            if (self.imageUrls[key].includes(imageUrl)) {
                                self.timestamps[key] = Date.now()
                                break;
                            }
                        }
                        this.paintData(imgData);
                    })
            })
        }

        /**
         * 票据涂抹
         */
        bianji (data) {
            this.paintImage = data;
            this.$refs['imagePaintDialog'].openDialog();
            this.$refs['imagePreview'].closeDialog();
        }

        paintData (data) {
            if (data.id != undefined && data.id != '') {
                // this.updateBillImg1d = Date.now();
                this.$refs['imagePaintDialog'].closeDialog();
            }
        }

        // getEndorsementFileName1 (imgUrl) {
        //     var suffix = imgUrl.substr(imgUrl.lastIndexOf('.'), imgUrl.length);
        //     return imgUrl.replace(suffix, `-1${suffix}`)
        // }


        // 审核点击改变瑕疵
        changeCheckFlaw (item) {
            if(this.form.bill_flaw_ids[this.form.bill_flaw_ids.length - 1] == 1500){
                this.form.bill_flaw_ids = [1500]
            }else if(this.form.bill_flaw_ids[this.form.bill_flaw_ids.length - 1] == 2202){
                this.form.bill_flaw_ids = [2202]
            }else {
                if(this.form.bill_flaw_ids.includes(1500)){
                    this.form.bill_flaw_ids.splice(item.indexOf(1500),1)
                    this.form.bill_flaw_ids = item;
                }else if(this.form.bill_flaw_ids.includes(2202)){
                    this.form.bill_flaw_ids.splice(item.indexOf(2202),1)
                    this.form.bill_flaw_ids = item;
                }
            }
            if(this.form.bill_flaw_ids.indexOf(1501) == -1){
                this.form.flaw_append = '';
            }
        }

        // 审核选择承兑机构
        changeCheckbox (accept_type_id) {

        }

        // 上传票据正面
        forntBillImg (valData: any) {
            if(valData != null && valData != undefined){
                this.form.bill_front_photo_path = valData.path;
                this.form.bill_front_photo_id = valData.id;
            }
        }

        confirmCheck (val, val_text) {
            let emitForm = {
                check: val,
                check_text: val_text,
                ...this.form
            }
            this.$emit('formCheck',emitForm)
        }
        openPreview (data) {
            this.previewImage = '';
            this.previewImage = data;
            this.$refs['imagePreview'].openDialog()
        }
        openDialog () {
            this.$refs['editBillCheck'].openDialog();
        }
        closeDialog () {
            this.$refs['editBillCheck'].closeDialog();
        }
        closeEditDialog () {
            this.$refs['imagePreview'].closeDialog();
        }

        // 获取涂抹之后对应的文件名称
        // getEndorsementFileName (imgUrl) {
        //     var filename = imgUrl.replace(/^.+\.com\//, '')
        //     var suffix = filename.substr(filename.lastIndexOf('.'), filename.length);
        //     return filename.replace(suffix, `-1${suffix}`)
        // }

        mounted () {
            this.getPolicy();
            // this.eleBillAccount = this.form.account_information
        }
    }
</script>
<style lang="scss" scoped>
    .submit-btn {
        display: flex;
        justify-content: center;
    }
    .admin_bill_price {
        .el-input {
            width: 320px;
        }
    }
    .bill_check_btn_bianji_box {
        height: 34px;
        line-height: 34px;
        /*position: relative;*/
        .bill_check_btn_bianji {
            float: right;
        }
    }

</style>
<style lang="scss">
    .bill-form-box {
        .el-form-item {
            margin-bottom: 10px;
        }
    }
    .bill_img_box {
        width: 940px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .bill_detail_img {
            width: 240px;
            height: 148px;
            border: 1px dashed $__color-border;
            padding: 8px 10px;
            margin-bottom: 8px;
            /*img {*/
                /*max-width: 207px;*/
                /*max-height: 148px;*/
            /*}*/
        }
    }
    .text_left {
        text-align: left !important;
    }
    .bill_int {
        .el-input__inner {
            height: 32px;
            line-height: 32px;
            width: 320px;
        }
    }
    .bill-flaw {
        .turn-flaw {
            .el-input__inner {
                border: none;
            }
            .el-input {
                width: 60px;
            }
            .el-checkbox-button__inner {
                padding: 0 0 0 8px;
                height: $height-int-register;
            }
            .el-input__inner {
                height: 30px;
                line-height: 30px;
                width: 60px;
                margin-top: 2px;
            }
            .el-input-number {
                line-height: 36px;
            }
            .el-input-number.is-controls-right .el-input-number__decrease {
                bottom: 4px;
            }
            .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease {
                line-height: 17px;
            }
            .el-input-number__increase, .el-input-number__decrease {
                top: 4px;
            }
            .el-input-number {
                width: 100px;
            }
        }
        .is-checked {
            .el-input__inner {
                background: $__color-primary;
                color: #fff;
            }
        }
    }
    .flaw-num {
        .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease {
            line-height: 15px;
        }
        .el-input-number.is-controls-right .el-input-number__decrease {
            bottom: 4px;
        }
        .el-input-number__increase, .el-input-number__decrease {
            top: 4px;
        }
        .el-input__inner {
            height: $height-int;
            line-height: $height-int;
        }
    }
    .posted-int-width {
        .el-input {
            width: 84%;
        }
    }
</style>